<script lang="jsx" setup>
import { computed, nextTick, ref } from 'vue';
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs';
import { addFrame, deleteFrame, scrapFrame, updateFrame } from '@/service/api/modules/workwear/frame-management';

const useModal = window.$useModal;
const searchParams = ref({
  frameNo: null,
  frameName: null,
  time: null,
  state: 0
});
const searchFormList = [
  {
    type: 'input',
    key: 'frameName',
    label: '网框名称',
    placeholder: '请输入网框名称',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4
  },
  {
    type: 'input',
    key: 'frameNo',
    label: '网框编码',
    placeholder: '请输入网框编码',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4
  },
  {
    type: 'select',
    key: 'state',
    label: '状态',
    placeholder: '请选择状态',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4,
    selectOptions: [
      {
        label: '生效',
        value: 0
      },
      {
        label: '报废',
        value: 1
      }
    ]
  },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '日期',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6
  }
];

const searchData = computed(() => {
  const params = {
    ...searchParams.value
  };
  if (searchParams.value?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD');
  }
  delete params.time;
  return params;
});

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'frameName',
    dataIndex: 'frameName',
    title: '网框名称',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'frameNo',
    dataIndex: 'frameNo',
    title: '网框编码',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'state',
    dataIndex: 'state',
    title: '状态',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return (
        <span class={record.state === 0 ? 'color-green' : 'color-red'}>{record.state === 0 ? '生效' : '报废'}</span>
      );
    }
  },
  {
    key: 'remark',
    dataIndex: 'remark',
    title: '备注',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '创建人',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '创建时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },
  {
    key: 'updateBy',
    dataIndex: 'updateBy',
    title: '修改人',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100
  },
  {
    key: 'updateDate',
    dataIndex: 'updateDate',
    title: '修改时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  }
];
const tableRef = ref(null);

const tabaleSelect = ref([]);
function tableSelectChange(val) {
  tabaleSelect.value = val;
}

function handleList(row) {}

function search() {
  tableRef.value.getData(1);
}

function reset() {
  searchParams.value = {
    frameNo: null,
    frameName: null,
    time: null,
    state: 0
  };
  nextTick(() => {
    search();
  });
}
const operationType = ref('add');
const { handleShow, handleClose, handleLoading, updateModalOptions } = useModal({
  modalOption: {
    title: '新增网框',
    width: '610px',
    height: '330px',
    destroyOnClose: true,
    confirmBtnText: '保存'
  },
  formData: {
    frameNo: null,
    frameName: null,
    washCount: 5,
    remark: null
  },
  formList: [
    {
      label: '网框编码',
      key: 'frameNo',
      span: 24,
      type: 'input',
      placeholder: '请输入网框编码',
      rule: [{ required: true, message: '请输入网框编码', trigger: 'blur' }]
    },
    {
      label: '网框名称',
      key: 'frameName',
      span: 24,
      type: 'dictionary',
      selectType: 'select',
      showSearch: true,
      placeholder: '请选择网框名称',
      rule: [{ required: true, message: '请选择网框名称', trigger: 'blur' }],
      dictCode: 'frame_model'
    },
    {
      label: '翻洗次数',
      key: 'washCount',
      span: 24,
      type: 'input',
      placeholder: '请输入翻洗次数',
      rule: [{ required: true, message: '请输入翻洗次数', trigger: 'blur' }]
    },
    {
      type: 'textarea',
      key: 'remark',
      label: '备注',
      placeholder: '请输入备注',
      span: 24
    }
  ],
  onOk: async model => {
    handleLoading(true);
    try {
      let pro;
      if (operationType.value === 'add') {
        pro = await addFrame(model);
      } else {
        pro = await updateFrame({ ...model });
      }
      const { error } = await pro;
      if (!error) {
        window.$message.success('操作成功');
        handleClose();
        search();
      }
    } finally {
      handleLoading(false);
    }
  },
  onClose: () => {}
});

function handleAdd(row) {
  if (row) {
    operationType.value = 'edit';
    updateModalOptions({
      title: '修改网框'
    });
    handleShow(row);
  } else {
    operationType.value = 'add';
    updateModalOptions({
      title: '新增网框'
    });
    handleShow({ frameNo: null, frameName: null, washCount: 5, remark: null });
  }
}

function handelDel(row) {
  let title;
  if (row) {
    title = (
      <div>
        确定<span class="color-red font-bold">删除</span>网框编码为"
        <span class="color-blue font-bold">{row.frameNo}</span>"的记录吗？
      </div>
    );
  } else {
    title = (
      <div>
        确定将所勾选的项进行<span class="color-red font-bold">删除</span>操作吗？
      </div>
    );
  }
  window.$modal.confirm({
    title,
    onOk: () => {
      let params = [];
      if (row) {
        params = [row];
      } else {
        params = tabaleSelect.value;
      }
      deleteFrame(params).then(({ error }) => {
        if (!error) {
          window.$message.success('删除成功');
          search();
        }
      });
    },
    onCancel: () => {}
  });
}

function handle(data, type) {
  console.log(data);
  switch (type) {
    case 'add':
      handleAdd();
      break;
    case 'edit':
      handleAdd(data.record);
      break;
    case 'del':
      handelDel(data.record);
      break;
    case 'scrap':
      handleScrap(data.record);
      break;
    default:
  }
  data.hidePopup();
}

function handleScrap(row) {
  let title;
  if (row) {
    title = (
      <div>
        确定<span class="color-red font-bold">报废</span>网框编码为"
        <span class="color-blue font-bold">{row.frameNo}</span>"的记录吗？
      </div>
    );
  } else {
    title = (
      <div>
        确定将所勾选的项进行<span class="color-red font-bold">报废</span>操作吗？
      </div>
    );
  }
  window.$modal.confirm({
    title,
    onOk: () => {
      let params = [];
      if (row) {
        params = [row];
      } else {
        params = tabaleSelect.value;
      }
      scrapFrame(params).then(({ error }) => {
        if (!error) {
          window.$message.success('报废成功');
          search();
        }
      });
    },
    onCancel: () => {}
  });
}
</script>

<template>
  <div class="frame-management-page min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>
    <Table
      ref="tableRef"
      v-model:searchParams="searchData"
      :column="column"
      show-row-selection
      row-key="frameId"
      auto-generate-uuid
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="/qms/scrscreen/frame/pageList"
      @table-select-change="tableSelectChange"
      @table-row-dblclick="handleList"
    >
      <template #title>
        <AButton
          v-hasAuth="['workwear:frame-management:add']"
          type="primary"
          class="mini-btn mr-8px"
          size="small"
          ghost
          @click="handleAdd(null)"
        >
          <template #icon>
            <PlusOutlined class="align-sub" />
          </template>
          新增
        </AButton>
        <AButton
          v-hasAuth="['workwear:frame-management:update']"
          type="primary"
          class="mini-btn mr-8px"
          size="small"
          ghost
          :disabled="tabaleSelect.length != 1"
          @click="handleAdd(tabaleSelect[0])"
        >
          <template #icon>
            <EditOutlined class="align-sub" />
          </template>
          修改
        </AButton>

        <AButton
          v-hasAuth="['workwear:frame-management:delete']"
          type="primary"
          danger
          class="mini-btn mr-8px"
          size="small"
          ghost
          :disabled="!tabaleSelect.length"
          @click="handelDel()"
        >
          <template #icon>
            <DeleteOutlined class="align-sub" />
          </template>
          批量删除
        </AButton>

        <AButton
          v-hasAuth="['workwear:workwear:frame-managementt:scrap']"
          type="primary"
          class="mini-btn mr-8px"
          size="small"
          ghost
          :disabled="!tabaleSelect.length"
          @click="handleScrap()"
        >
          <template #icon>
            <em class="iconfont icon-baofei align-sub"></em>
          </template>
          批量报废
        </AButton>
      </template>
      <template #contextmenuPopup-orter="{ args }">
        <li v-hasAuth="['workwear:frame-management:add']" class="popup-item" @click="handle(args, 'add')">
          <PlusOutlined />
          新增
        </li>
        <li v-hasAuth="['workwear:frame-management:update']" class="popup-item" @click="handle(args, 'edit')">
          <EditOutlined />
          修改
        </li>
        <li v-hasAuth="['workwear:frame-management:delete']" class="popup-item" @click="handle(args, 'del')">
          <DeleteOutlined />
          删除
        </li>
        <li v-hasAuth="['workwear:frame-management:scrap']" class="popup-item" @click="handle(args, 'scrap')">
          <em class="iconfont icon-baofei"></em>
          报废
        </li>
      </template>
    </Table>
  </div>
</template>

<style lang="scss" scoped></style>
